<template>
  <el-main>
    <!-- 查询条件 -->
    <el-form
      :model="searchModel"
      label-width="80px"
      :inline="true"
      size="small"
    >
      <el-form-item>
        <el-input
          v-model="searchModel.name"
          clearable
          placeholder="请输入姓名"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search(pageNo, pageSize)"
          >查询</el-button
        >
        <el-button type="success" icon="el-icon-plus" @click="openAddWindow"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table
      :data="vehicleUserList"
      :height="tableHeight"
      border
      stripe
      style="width: 100%; margin-bottom: 10px"
    >
      <el-table-column
        prop="idNumber"
        label="身份证"
        align="center"
        width="250px"
      ></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex" />
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <!-- <el-table-column prop="photo" label="照片"></el-table-column> -->
      <el-table-column prop="photo" label="照片" align="center">
        <template slot-scope="scope">
          <viewer
            ><img
              style="width: 50px; height: 50px"
              :src="scope.row.photo" /></viewer></template
      ></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="carNumber" label="车牌号"></el-table-column>
      <el-table-column label="操作" align="center" width="290">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            >编辑
          </el-button>
          <!-- <el-button
            icon="el-icon-search"
            type="primary"
            size="small"
            @click="handleSelect(scope.row)"
            >查看
          </el-button> -->
          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加和修改车主信息窗口 -->
    <system-dialog
      :title="vehicleUserDialog.title"
      :visible="vehicleUserDialog.visible"
      :width="vehicleUserDialog.width"
      :height="vehicleUserDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
    >
      <div slot="content">
        <el-form
          :model="vehicleUser"
          ref="vehicleUserForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="身份证号" prop="idNumber">
            <el-input v-model="vehicleUser.idNumber"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="vehicleUser.name"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select
              v-model="vehicleUser.sex"
              placeholder="请选择性别"
              style="width: 185px"
            >
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="Number(dict.value)"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="vehicleUser.age"></el-input>
          </el-form-item>
          <!-- <el-form-item label="照片" prop="photo">
            <el-input v-model="vehicleUser.photo"></el-input>
          </el-form-item> -->
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="vehicleUser.phone"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="vehicleUser.email"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input v-model="vehicleUser.address"></el-input>
          </el-form-item>
          <el-form-item label="车牌号" prop="carNumber">
            <el-input v-model="vehicleUser.carNumber"></el-input>
          </el-form-item>
          <el-form-item label="照片">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              class="avatar-uploader"
              :data="uploadHeader"
              action="http://localhost:8888/api/oss/file/upload?module=avatar"
            >
              <img v-if="vehicleUser.photo" :src="vehicleUser.photo" />
              <i v-else class="el-icon-plus avatar-uploader-icon" /> </el-upload
          ></el-form-item>
        </el-form>
      </div>
    </system-dialog>
    <!-- 查看车辆基本信息窗口 -->
    <system-dialog
      :title="vehicleBasicInformationDialog.title"
      :visible="vehicleBasicInformationDialog.visible"
      :width="vehicleBasicInformationDialog.width"
      :height="vehicleBasicInformationDialog.height"
      @onClose="onDutyClose"
      @onConfirm="onDutyConfirm"
    >
      <div slot="content">
        <el-form
          :model="vehicleBasicInformation"
          ref="vehicleBasicInformationForm"
          :rules="rules"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item label="车牌号" prop="carNumber">
            <el-input
              :disabled="true"
              v-model="vehicleBasicInformation.carNumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="车照片" prop="carPhoto">
            <el-input
              :disabled="true"
              v-model="vehicleBasicInformation.carPhoto"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>
  </el-main>
</template>

<script>
//导入保安api脚本
import vehicleUserApi from "@/api/vehicleUser";
//导入保安值班api脚本
import vehicleBasicInformationApi from "@/api/vehicleBasicInformation";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog.vue";
//导入token
import { getToken } from "@/utils/auth";
export default {
  dicts: ["sys_user_sex"],
  //注册组件
  components: { SystemDialog },
  data() {
    return {
      //上传需要携带的数据
      uploadHeader: { token: getToken() },
      //查询条件
      searchModel: {
        name: "",
        pageNo: 1,
        pageSize: 10,
      },
      //车主对象
      vehicleUser: {
        id: "",
        idNumber: "",
        name: "",
        sex: "",
        age: "",
        photo: "",
        phone: "",
        email: "",
        address: "",
        carNumber: "",
      },
      //车辆基本信息对象
      vehicleBasicInformation: {
        carNumber: "",
        carPhoto: "",
      },
      //添加和修改重点人员窗口属性
      vehicleUserDialog: {
        title: "",
        visible: false,
        height: 500,
        width: 600,
      },
      //重点人员位置窗口属性
      vehicleBasicInformationDialog: {
        title: "",
        visible: false,
        height: 200,
        width: 600,
      },
      rules: {
        idNumber: [
          { required: true, trigger: "blur", message: "请输入保安编号" },
        ],
        name: [{ required: true, trigger: "blur", message: "请输入姓名" }],
        sex: [{ required: true, trigger: "blur", message: "请输入性别" }],
        age: [{ required: true, trigger: "blur", message: "请输入年龄" }],
        photo: [{ required: true, trigger: "blur", message: "请输入照片" }],
        phone: [{ required: true, trigger: "blur", message: "请输入手机号" }],
        email: [{ required: true, trigger: "blur", message: "请输入电子邮箱" }],
        address: [{ required: true, trigger: "blur", message: "请输入地址" }],
        carNumber: [{ required: true, trigger: "blur", message: "请输入车牌" }],
      },
      vehicleUserList: [],
      tableHeight: 0, //表格高度
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
    };
  },
  //初始化时调用
  created() {
    //调用查询角色列表的方法
    this.search();
  },
  //挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 220;
    });
  },
  methods: {
    /**
     * 上传成功回调
     * @param res
     * @param file
     */
    handleAvatarSuccess(res, file) {
      this.vehicleUser.photo = res.data;
      // 强制重新渲染
      this.$forceUpdate();
    },
    /**
     * 上传校验
     * @param file
     * @returns {boolean}
     */
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    /**
     * 当每页数量发生变化时触发该事件
     */
    handleSizeChange(size) {
      this.pageSize = size; //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /**
     * 当页码发生变化时触发该事件
     */
    handleCurrentChange(page) {
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },
    /**
     * 设备查询
     */
    async search(pageNo = 1, pageSize = 10) {
      this.searchModel.pageNo = pageNo; //当前页码
      this.searchModel.pageSize = pageSize; //每页显示数量
      //发送查询请求
      let res = await vehicleUserApi.getVehicleUserListByNameApi(
        this.searchModel
      );
      //执行成功
      if (res.success) {
        //设备列表
        this.vehicleUserList = res.data.records;
        //总数量
        this.total = res.data.total;
      }
    },
    /**
     * 打开添加窗口
     */
    openAddWindow() {
      //清空表单数据
      this.$resetForm("vehicleUserForm", this.vehicleUser);
      this.vehicleUserDialog.title = "新增车主人员"; //设置窗口标题
      this.vehicleUserDialog.visible = true; //显示窗口
    },
    /**
     * 查看窗口
     */
    async handleSelect(row) {
      let res =
        await vehicleBasicInformationApi.getVehicleBasicInformationByCarNumberApi(
          {
            carNumber: row.carNumber,
          }
        );
      this.vehicleBasicInformation = res.data;
      //设置窗口标题
      this.vehicleBasicInformationDialog.title = "查看车辆信息";
      //显示编辑角色窗口
      this.vehicleBasicInformationDialog.visible = true;
    },
    /**
     * 打开编辑窗口
     */
    handleEdit(row) {
      //数据回显
      this.$objCopy(row, this.vehicleUser); //将当前编辑的数据复制到vehicleUser对象中
      //设置窗口标题
      this.vehicleUserDialog.title = "编辑重点人员基本信息";
      //显示编辑角色窗口
      this.vehicleUserDialog.visible = true;
    },
    /**
     * 删除设备
     */
    async handleDelete(row) {
      //确认是否删除
      let confirm = await this.$myconfirm("确定要删除该数据吗?");
      if (confirm) {
        //发送删除请求
        let res = await vehicleUserApi.deleteById({
          id: row.id,
        });
        //判断是否成功
        if (res.success) {
          //成功提示
          this.$message.success(res.message);
          //刷新
          this.search(this.pageNo, this.pageSize);
        } else {
          //失败提示
          this.$message.error(res.message);
        }
      }
    },
    /**
     * 窗口事件
     */
    onDutyClose() {
      this.vehicleBasicInformationDialog.visible = false;
    },
    /**
     * 窗口确认事件
     */
    onDutyConfirm() {
      this.vehicleBasicInformationDialog.visible = false;
    },
    /**
     * 窗口事件
     */
    onClose() {
      this.vehicleUserDialog.visible = false;
    },
    /**
     * 窗口确认事件
     */
    onConfirm() {
      //表单验证
      this.$refs.vehicleUserForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断传感器ID是否为空
          if (this.vehicleUser.id === "") {
            //新增
            //发送添加请求
            this.vehicleUser.userId = this.$store.getters.userId;
            res = await vehicleUserApi.addVehicleUserApi(this.vehicleUser);
          } else {
            let time = new Date();
            //格式话时间类型
            let nowTime = this.$timestampToTime(
              time.toLocaleString("en-US", { hour12: false }).split(" ")
            );
            this.vehicleUser.payDate = nowTime;
            //发送修改请求
            res = await vehicleUserApi.updateVehicleUserApi(this.vehicleUser);
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo, this.pageSize);
            //关闭窗口
            this.vehicleUserDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
//用户头像
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar-uploader img {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
